<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button class="tableFontSize" type="primary" link size="small" @click="editBtn(row.row.row)">配置</el-button>
        </span>
      </template>
      <template v-slot:selectNamelist>
        分站模式配置信息
      </template>
    </list_controller>
    <!-- 新增弹框 -->
    <teleport to="body">
      <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="660" :height="auto" v-model="state.addModal"
        resize :mask="true" showFooter>
        <template #title>
          <div class="w100 h100 fsc mask_title">{{state.modalTitle}}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="分站">
                    <el-select clearable filterable v-model="state.formData.station" placeholder="请选择" @change="stationChange">
                      <el-option v-for="item in state.stationmodelList" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="闭锁模式" prop="stationBlockModel">
                    <el-select clearable filterable v-model="state.formData.stationBlockModel" placeholder="请选择">
                      <el-option v-for="item in state.stationModelsList" :key="item" :label="item" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="state.formData.stationBlockModel=='可配置闭锁分站'">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="瓦斯闭锁浓度">
                        <el-select clearable filterable v-model="state.formData.gasDensity" placeholder="请选择">
                          <el-option v-for="item in state.allDensitysList" :key="item" :label="item" :value="item">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item>
                        <label slot="label" style="display: flex;">
                          <span style="white-space: nowrap;">掘进工作面甲烷测点号</span>
                          <!-- <el-button link type="primary" style="margin-left:5px;">一键设置</el-button> -->
                        </label>
                        <el-select clearable filterable v-model="state.formData.tunnelMethanePoint" placeholder="请选择">
                          <el-option v-for="item in state.tunnelMethanePointList" :key="item.pointId" :label="item.pointId"
                            :value="item.pointId">
                            <span>{{item.pointId+'-'+item.placeName}}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item>
                        <label slot="label" style="display: flex;">
                          <span style="white-space: nowrap;">回风流甲烷测点号</span>
                          <!-- <el-button link type="primary" style="margin-left:5px;">一键设置</el-button> -->
                        </label>
                        <el-select clearable filterable v-model="state.formData.flowMethanePoint" placeholder="请选择">
                          <el-option v-for="item in state.tunnelMethanePointList" :key="item.pointId" :label="item.pointId"
                            :value="item.pointId">
                            <span>{{item.pointId+'-'+item.placeName}}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="16">
                      <el-form-item>
                        <label slot="label" style="display: flex;">
                          <span style="white-space: nowrap;">被串掘进工作面入风流甲烷测点号</span>
                          <!-- <el-button link type="primary" style="margin-left:5px;">一键设置</el-button> -->
                        </label>
                        <el-select clearable filterable v-model="state.formData.excavatedMethanePoint" placeholder="请选择">
                          <el-option v-for="item in state.tunnelMethanePointList" :key="item.pointId" :label="item.pointId"
                            :value="item.pointId">
                            <span>{{item.pointId+'-'+item.placeName}}</span>
                          </el-option>
                        </el-select>
                        <el-checkbox style="margin-left: 5px;" v-model="state.formData.separatePowerOutage">单独断电(≥1.5)
                        </el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="state.formData.separatePowerOutage">
                      <el-form-item label="开出口" prop="openExit">
                        <el-select multiple clearable filterable v-model="state.formData.openExit" placeholder="请选择">
                          <el-option v-for="item in state.forecastTypeList" :key="item" :label="item" :value="item">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="风筒测点号(可选)">
                        <el-select clearable filterable v-model="state.formData.barrelPoint" placeholder="请选择">
                          <el-option v-for="item in state.barrelPointList" :key="item.pointId" :label="item.pointId"
                            :value="item.pointId">
                            <span>{{item.pointId+'-'+item.placeName}}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item prop="parkOnePoint">
                        <label slot="label" style="display: flex;">
                          <span style="color:#f56c6c;">*</span><span style="white-space: nowrap;">开停1测点号(必选)</span>
                          <!-- <el-button link type="primary" style="margin-left:5px;">一键设置</el-button> -->
                        </label>
                        <el-select clearable filterable v-model="state.formData.parkOnePoint" placeholder="请选择">
                          <el-option v-for="item in state.parkOnePointList" :key="item.pointId" :label="item.pointId"
                            :value="item.pointId">
                            <span>{{item.pointId+'-'+item.placeName}}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="开停2测点号">
                        <el-select clearable filterable v-model="state.formData.parkTwoPoint" placeholder="请选择">
                          <el-option v-for="item in state.parkOnePointList" :key="item.pointId" :label="item.pointId"
                            :value="item.pointId">
                            <span>{{item.pointId+'-'+item.placeName}}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                    </el-col> -->
                    <el-col :span="8">
                      <el-form-item label="开停3测点号">
                        <el-select clearable filterable v-model="state.formData.parkThreePoint" placeholder="请选择">
                          <el-option v-for="item in state.parkOnePointList" :key="item.pointId" :label="item.pointId"
                            :value="item.pointId">
                            <span>{{item.pointId+'-'+item.placeName}}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="开停4测点号">
                        <el-select clearable filterable v-model="state.formData.parkFourPoint" placeholder="请选择">
                          <el-option v-for="item in state.parkOnePointList" :key="item.pointId" :label="item.pointId"
                            :value="item.pointId">
                            <span>{{item.pointId+'-'+item.placeName}}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="开出口断电电平">
                        <div style="display: flex;">
                          <div v-for="(item,index) in state.openList"
                            style="display: flex;flex-direction: column;margin-right: 30px;">
                            <label>{{ index+1 }}</label>
                            <el-switch v-model="state.formData[item]" inline-prompt active-color="rgba(64, 158, 255, 1)"
                              inactive-text="低" inactive-color="rgba(245, 108, 108, 1)">
                            </el-switch>
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="开停传感器断电模式">
                        <el-radio-group v-model="state.formData.powerOffModel">
                          <el-radio label="组合">组合</el-radio>
                          <el-radio label="单独">单独</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="submitForm">
                确定
              </el-button>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import {
    computed,
    reactive
  } from "vue";
  import {
    table_headers
  } from '@/components/commonCom/table_headers';
  import axios from "@/utils/request"
  import usePagesStore from '@/store/modules/pages'
  import {
    getlistSitesList,
    getStationModelsList,
    getAllDensitysList,
    getlistPointsBySensorName
  } from '@/api/config'
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore()
  const router = useRouter();
  let previewHttps =
    import.meta.env.VITE_APP_HTTP
  components: {
    list_controller
  }
  const upload = ref(null)
  let state = reactive({
    fileList: [],
    dialogVisiblepictureCardPreview: false,
    dialogImageUrl: '',
    options: {
      tableheads: computed(() => table_headers.configStationBlock),
      queryList: {
        dropdownUrl: '',
        querys: [{
          field: 'station',
          title: '分站',
          type: 'select',
          binddata: '',
          options: [],
        }, {
          field: 'stationBlockModel',
          title: '闭锁模式',
          type: 'select',
          binddata: '',
          options: [],
        }, {
          field: 'gasDensity',
          title: '闭锁浓度',
          type: 'select',
          binddata: undefined,
          options: [],
        }],
        queryMap: new Map([
          ['sensorTypeId', 'safety_pointType'],
          ['deviceTypeId', 'safety_deviceType'],
          ['alarmTypeId', 'alarmType']
        ])
      },
      dataUrl: '/station/block/list',
      delUrl: '/station/block/del',
      addUrl: '/station/block/add',
      descUrl: '/station/block/getById',
      editUrl: '/station/block/modify',
    },
    // 表单
    addModal: false,
    modalTitle: '配置',
    formRef: null,
    formData: {
      separatePowerOutage: false
    },
    openList: [
      'powerDownOne', 'powerDownTwo', 'powerDownThree', 'powerDownFour', 'powerDownFive', 'powerDownSix'
    ],
    rules: {
      stationBlockModel: [{
        required: true,
        message: '请选择闭锁模式',
        trigger: 'change'
      }],
      openExit: [{
        required: true,
        message: '请选择开出口',
        trigger: 'change'
      }],
      parkOnePoint: [{
        required: true,
        message: '请选择开停1测点号',
        trigger: 'change'
      }]
    },
    editId: undefined,
    stationmodelList: [],
    stationModelsList: [],
    allDensitysList: [],
    forecastTypeList: [
      1, 2, 3, 6
    ],
    stationOutNumList: [{}],
    tunnelMethanePointList: [],
    flowMethanePointList: [],
    excavatedMethanePointList: [],
    barrelPointList: [],
    parkOnePointList: [],
    parkTwoPointList: [],
    parkThreePointList: [],
    parkFourPointList: [],
    stationCode:undefined
  })
  // 编辑按钮
  async function editBtn(row) {
    state.modalTitle = '配置'
    state.addModal = true
    axios.post(state.options.descUrl, {
      id: row.id
    }).then(async res => {
      if (res.code == 200) {
        state.formData = res.data
        if(res.data.openExit !=null){
          state.formData.openExit = res.data.openExit.split(',').map(item => {
            return Number(item)
          })
        }
        state.stationCode=res.data.station
        state.tunnelMethanePointList = await listPointsBySensorName('瓦斯', 'A%')
        state.editId = res.data.id
      }
    })
    state.barrelPointList = await listPointsBySensorName('风筒', 'D%')
    state.parkOnePointList = await listPointsBySensorName('开停', 'D%')
  }
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if(state.formData.openExit !=null){
          state.formData.openExit = state.formData.openExit.toString()
        }
        state.formData.id = state.editId
        axios.post(state.options.editUrl, state.formData).then(res => {
          if (res.code == 200) {
            proxy.$refs['zujianname'].getData()
            state.addModal = false
            proxy.$modal.msgSuccess(res.msg);
          }
        })
      }
    })
  }

  function cancel() {
    state.addModal = false
  }
  // 分站下拉事件
 async function stationChange(val){
    state.stationCode=val
    state.tunnelMethanePointList = await listPointsBySensorName('瓦斯', 'A%')
    axios.post('/station/block/getByStation',{station:val}).then(res=>{
  if (res.code == 200) {
        state.formData = res.data
        if(res.data.openExit !=null){
          state.formData.openExit = res.data.openExit.split(',').map(item => {
            return Number(item)
          })
        }
        state.stationCode=res.data.station
        state.editId = res.data.id
      }
    })
  }

  function listPointsBySensorName(sensorName, condition) {
    return new Promise(resolve => {
      getlistPointsBySensorName({
        sensorName: sensorName,
        condition: condition,
        stationCode:state.stationCode
      }).then(res => {
        resolve(res.data)
      })
    })
  }

  function getsubstationmodelList() {
    getlistSitesList().then(res => {
      state.stationmodelList = Object.keys(res.data).map(item => {
        return {
          label: item+'-'+res.data[item],
          value: item
        }
      })
      state.options.queryList.querys[0].options = state.stationmodelList
      getStationModelsList().then(res => {
        console.log(res.data,"的撒沙河")
        state.stationModelsList = res.data
        state.options.queryList.querys[1].options = res.data.map(item => {
          return {
            label: item,
            value: item
          }
        })
      })
      getAllDensitysList().then(res => {
        state.allDensitysList = res.data
        state.options.queryList.querys[2].options = res.data.map(item => {
          return {
            label: item,
            value: item
          }
        })
      })
    })
  }
  getsubstationmodelList()
</script>
<style lang="scss" scoped>
  ::v-deep .el-drawer {
    .querycss {
      .fsc {
        &:nth-child(2) {
          display: none;
        }
      }
    }

    .table_box {
      .fsc {
        display: none;
      }
    }
  }
</style>